
<template >
  <div v-if="detail.hash" style="background:#f3f3f3;height:100%;">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">任务详情</h1>
      <div class="mint-header-button is-right" />
    </header>
    <div>
      <div style="background-color:#26a2ff;padding:10px;height:164px;" />

    </div>
    <div class="mt_-100">
      <mt-cell :value="detail.hash.taskname" class="border-bottom" title="任务名称" />
      <mt-cell :value="detail.hash.chargers" class="border-bottom" title="责任人" />
      <mt-cell :value="detail.hash.noticers" class="border-bottom" title="抄送人" />
      <mt-cell :value="detail.hash.createusername" class="border-bottom" title="发布人" />
      <mt-cell :value="detail.hash.tasklevelname" title="重要级别" />
      <mt-cell :value="detail.hash.taskdate" title="预计完成时间" />
      <mt-cell :value="statusname" title="完成状态" />
    </div>
    <div style="margin:10px 10px 0px 10px;;padding:10px;background-color:white;">
      <div style="padding-bottom:10px;border-bottom:1px solid #f3f3f3;">任务详情</div>
      <div style="padding-top:10px;line-height:22px;">{{ detail.hash.context }}</div>
    </div>
    <div class="info-title">沟通记录</div>
    <div v-for="(item, index) in reback" :key="index" style="margin:10px 10px 0 10px;">
      <div style="border-bottom:1px solid #f3f3f3;padding:15px;background-color:#fff;">{{item.hash.tousername==''? item.hash.tousername : "@"+item.hash.tousername }}{{ item.hash.context }}</div>
      <div style="padding:10px 15px;background-color:#fff;">
        <div style="float:left;margin-right:10px;">{{ item.hash.username }}</div>
        <div>{{ item.hash.createdate }}</div>
      </div>

    </div>

    <div v-if="detail.hash.status=='0'" class="info-title">留言</div>
    {{detail.hash.username}}
    <picker v-if="detail.hash.status=='0'" :values="detail.hash.userid" :label="detail.hash.username" :picdata="reimtypearr" class="rd_picker" style="margin-left:3px;" pictitle="@指定人:" @getpicval="getzhifu" />
    <div v-if="detail.hash.status=='0'" style="text-align:center;padding:0 10px;margin:10px 0;">
      <textarea v-model="rebackinput" style="border: 0; outline: none;padding:15px;width:100%;height:120px;" placeholder="请输入评论" rows="4" />
      </div>
    <div
      v-if="detail.hash.status=='0'"
      style="float:right;margin:-60px 20px 0 0;">
      <mt-button
        type="primary"
        style="width:72px;height:36px;font-size:14px;"
        @click="sendreback">发送</mt-button>
    </div>
    <div
      v-if="detail.hash.status=='0'"   
      style="margin:20px auto;text-align:center;">
      <mt-button
        type="primary"
        style="width:90%;height:36px;font-size:14px;"
        v-if="detail.hash.notfinish=='1'"
        @click="submitcar">完成任务</mt-button>
    </div>
  </div>
</template>
<script>
import picker from '~/components/picker.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
export default {
  components: {
    uploadpic,
    chouseperson,
    chousebumen,
    picker
  },
  data () {
    return {
      ts: this.newStore(),

      taskid: '',

      detail: {},
      reback: [],
      rebackinput: '',
      rebacker: '',
      reimtypearr: [],
      pagetype: '',
      touserid: '',
      tousername: ''
    }
  },
  computed: {
    statusname () {
      if (this.detail.hash.status == '1') {
        return '已完成'
      } else {
        return '未完成'
      }
    }
  },
  mounted () {
    this.taskid = this.$route.query.taskid
    this.getcodeData()
    //this.carData.
    this.getinfo()
  },
  methods: {
    getinfo () {
      const req = {
        handle: '1FA998754EC78E7DD6F3513F0FEA536DCB307DE5BC55A6BB',
        taskid: this.taskid
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.detail = ts.d.data.operation1[0]
        this.reback = ts.d.data.operation4
        console.log(this.detail)
      })
    },
    sendreback () {
      const req = {
        handle: '1FA998754EC78E7D4E95A8D2219E38CB66B035E3B6AFA77ABFF0B9210751F692',
        touserid: this.touserid,
        tousername: this.tousername,
        taskid: this.taskid,
        context: this.rebackinput,
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.getinfo()
        this.$router.go(0)
      })
    },
    getzhifu (val) {
      this.touserid = val.showid
      this.tousername = val.showname
      console.log(val, 'mmmm')
    },
    submitcar () {
      const req = {
        handle: '1FA998754EC78E7D76632EE4B0FC49B0A45297D7C6B18BC5',
        taskid: this.taskid
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        this.getinfo()
      })
    },
    option () {
      this.$router.push({
        name: 'task',
        query: {
          name: ''
        }
      })
    },
    getcodeData () {
      const req = {
        handle:
          '1FA998754EC78E7D578A3E9390AE65D1BC393F9F870D1179F85AA142B979BA49',
        taskid: this.taskid
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          let item = ts.d.data.operation1[index]
          b.showid = item.hash.userid
          b.showname = item.hash.username
          this.reimtypearr.push(b)
        }
        // console.log(ts.d.data.operation1,'支付方式')
      })
    }
  }
}
</script>

<style scoped>
html,
body,
#app {
  height: 100% !important;
  background: #f3f3f3 !important;
}
a {
  text-decoration: none;
}
.blockDiv {
  margin-top: 100px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: scroll;
}
.block {
  width: calc(calc(100% / 2) - 10px);
  margin: 5px;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
}
.info-title {
  padding: 10px;
  color: #ccc;
  font-size: 16px;
}
.border-bottom {
  border-bottom: 1px solid #f3f3f3;
}
.bg-con {
  background: #fff;
  width: 95%;
  margin: 0 auto 5px;
}
.img_id img {
  width: 100%;
  margin: 10px 5px;
  text-align: center;
  box-sizing: border-box;
}
.mint-cell-wrapper {
  font-size: 14px;
}
.xuli_div {
  background: #fff;
  padding: 5px;
  font-size: 15px;
  width: 95%;
  margin: 0 auto;
}
.xuli_span {
  border-left: 3px solid #ccc;
  display: inline-block;
  padding-left: 5px;
}
.mint-field-core {
  text-align: right !important;
}
.mt_10 {
  margin-top: 10px;
}
.info-title {
  padding: 10px 10px 0 10px;
  color: #ccc;
  font-size: 16px;
  font-weight: bold;
}
.mt_-100 {
  margin: -144px 10px 0px 10px;
}
</style>
